<template>
	<view class="content">
		<view class="head">
			<u-navbar v-if="title" :placeholder='true' :title="title" leftIcon="arrow-leftward" @leftClick="leftClick">
			</u-navbar>
			<u-navbar v-else :placeholder='true' leftIcon="arrow-leftward" @leftClick="leftClick">
				<view class="u-nav-slot" slot="right">
					<u-search :show-action="false" borderColor="#7A7DEE" bgColor="#FFFFFF" placeholder="輸入關鍵字搜索"
						v-model="keyword" @search="changeBtn" @clear="clear" @blur="blurBtn" @change=""></u-search>
				</view>
			</u-navbar>
			<sh-filter  :cateid="id" :brandlist="brandlist" :catelist="catelist" @change="onFilter" @brand="onbrand"></sh-filter>
			<good-card :goodlist="goodslist"></good-card>
		</view>
	</view>
</template>

<script>
	import {
		getCate,
		getBrand,
		getSearch
	} from "@/network/api/home.js"
	import shFilter from './components/sh-filter.vue';
	import goodCard from '../../../components/goodCard.vue'
	export default {
		data() {
			return {
				page: 1,
				keyword: "",
				priority:"",
				id: Number, //当前分类id
				title: '',
				searchdata: {
					lang: 'cn',
					id: '',
					user_id: '',
					brand: '',
					sort: '',
					search: '',
					priority: '',
					page: '',
					number: 20
				},
				brandlist: [],
				catelist: [],
				goodslist: [],
				tablist: ['desc', 'createtime_asc'], //综合推荐，上架时间
				salesOrder: ['virtual_sales_desc', 'virtual_sales_asc'], //多、少
				priceOrder: ['shop_price_desc', 'shop_price_asc'],
			}
		},
		onLoad(options) {
			// var data = options.id;
			console.log(options);
			if (options.id) {
				this.searchdata.id = Number(options.id)
				this.id = Number(options.id)
				this.getBrandlist()
				this.getCateList()
			}
			if (options.keyword) {
				this.searchdata.search = options.keyword
				this.keyword = options.keyword
			}
			if(options.priority){
				this.searchdata.priority = options.priority
				this.priority=options.priority
				this.getBrandlist()
				this.getCateList()
			}
			this.title = options.title
			this.getSearchList()

		},
		components: {
			shFilter,
			goodCard
		},
		onReachBottom() {
			this.page++
			this.getSearchList()
		},
		methods: {
      onbrand(e) {
        console.log(e)
        this.brandlist = e
      },

      changeBtn(){
        console.log(123)
        this.goodslist=[]
        this.page=1
        this.getSearchList()
      },
      blurBtn(){
        // console.log(1231)
        // this.goodslist=[]
        // this.page=1
        // this.getSearchList()
      },
      clear(){
        this.goodslist=[]
        this.keyword=''
        this.searchdata.search=''
        this.page=1
        this.getSearchList()
      },
			async getBrandlist() {

				const res = await getBrand(this.searchdata)
				this.brandlist = res.data.brand

			},
			async getCateList() {
				const res = await getCate(this.searchdata)
				this.catelist = res.data.categorylist
			},
			async getSearchList() {
        uni.request({
          url: 'https://www.mxnzp.com/api/convert/zh',
          data: {
            content: this.keyword,
            type: 1,
            app_id: 'msbudxfgigtihcyp',
            app_secret:'BkUzxodEM7ksIZWD273vAGIFRCLKFBe9'
          },
          success: async (res) => {
            if (this.keyword) {
              this.searchdata.search = res.data.data.convertContent
              this.getBrandlist()
              this.getCateList()
            }
            this.searchdata.page = this.page
            // 加载中
            uni.showLoading({
              title: '加载中'
            })
            const result = await getSearch(this.searchdata)
            // this.id = res.data.id
            let newgoodslist = result.data.list.data
            this.goodslist = [...this.goodslist, ...newgoodslist]
            if (this.goodslist.length == 0) {
              uni.showToast({
                title: '暫無數據',
                icon: 'none',
                duration: 2000
              })
            }
            uni.hideLoading()
          },
          fail: async (res) => {
            if (this.keyword) {
              this.searchdata.search = this.keyword
              this.getBrandlist()
              this.getCateList()
            }
            this.searchdata.page = this.page
            // 加载中
            uni.showLoading({
              title: '加載中'
            })
            const result = await getSearch(this.searchdata)
            let newgoodslist = result.data.list.data
            this.goodslist = [...this.goodslist, ...newgoodslist]
            if (this.goodslist.length == 0) {
              uni.showToast({
                title: '暫無數據',
                icon: 'none',
                duration: 2000
              })
            }
            uni.hideLoading()
          }
        })
			},
			onFilter(e) {
				console.log(e);
				if (e.defaultOrder) {
					this.searchdata.sort = this.tablist[e.defaultOrder]
				}
				if (!e.defaultOrder) {
					this.searchdata.sort = this.tablist[e.defaultOrder]
				}
				if (e.salesOrder) {
					this.searchdata.sort = this.salesOrder[e.salesOrder - 1]
				}
				if (e.priceOrder) {
					this.searchdata.sort = this.priceOrder[e.priceOrder - 1]
				}
				this.searchdata.brand = e.brand_id
				this.searchdata.id = e.cate_id || ''
				this.page = 1
				console.log(this.searchdata);
				this.goodslist = []
				this.getSearchList()

			},
			leftClick() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {}

	.head {

		.u-nav-slot {
			width: 610rpx;
		}
	}
</style>
